<template>
  <div class="question-view-container">
    <div
      class="flex flex-row items-center justify-between w-full px-4 box-border"
      v-if="dataType == 1 || dataType == 3"
    >
      <h4>以下问题由AI生成：</h4>
      <p class="change-btn" @click="changeQuestion">换一批</p>
    </div>
    <markdown
      v-if="dataType === 1 || dataType === 3"
      class="markdown-body"
      :content="currentQuestion"
    />
    <DocPreview
      v-else-if="dataType === 2"
      :url="questionContent.templateDownloadUrl"
      :fileName="questionContent.templateName"
    />
    <div v-else>暂未生成问题列表</div>
  </div>
</template>

<script setup>
import { defineProps, computed, ref, onMounted } from "vue";
import markdown from "@/components/markdown.vue";
import DocPreview from "@/components/DocPreview.vue";
import { useSalesTemplateStore } from "@/store";

const index = ref(0);
const store = useSalesTemplateStore();
const newQuestion = ref("");

onMounted(() => {
  console.log("props mounted: ", props.questionContent);
});

function changeQuestion() {
  console.log("changeQuestion :>> ");
  if (dataType.value === 1) {
    index.value += 1;
    if (index.value >= props.questionContent.questions.length) {
      index.value = 0;
    }
    console.log("changeQuestion :>> ", index.value);
  }
  if (dataType.value === 3) {
    console.log("updateAIQuestion");
    updateAIQuestion();
  }
}

async function updateAIQuestion() {
  const questionContent = props.questionContent;
  const question =
    newQuestion.value.length > 0 ? newQuestion.value : questionContent.questions;
  const res = await store.updateQuestionAction(questionContent.id, {
    prompt: questionContent.prompt,
    questions: question,
  });
  newQuestion.value = res;
  console.log("updateAIQuestion :>> ", res);
}

const isTemplates = computed(() => {
  let isTemplates = false;
  if (props.questionContent.questions) {
    isTemplates = true;
  }
  return isTemplates;
});

const dataType = computed(() => {
  const questionContent = props.questionContent;
  if (!questionContent) return -1;
  if (questionContent.questions) {
    if (typeof questionContent.questions === "string") {
      return 3;
    }
    return 1;
  }
  if (questionContent.templateDownloadUrl) return 2;
  return -1;
});

const currentQuestion = computed(() => {
  const questionContent = props.questionContent;
  if (!questionContent) return "";
  if (isTemplates.value) {
    if (dataType.value === 3) {
      if (newQuestion.value.length > 0) return newQuestion.value;
      return questionContent.questions;
    }
    return questionContent.questions[index.value];
  } else {
    return questionContent[index.value].questions;
  }
});

// const docUrl = computed(() => {
//   const questionContent = props.questionContent;
//   console.log("docUrl :>> ", questionContent);
//   let url = "";
//   if (dataType === 2) {
//     url = questionContent.value.templateDownloadUrl;
//   }
//   console.log("docUrl2 :>> ", url);
//   return url;
// });

const props = defineProps({
  questionContent: {
    type: Object,
  },
});
</script>

<style lang="less" scoped>
.question-view-container {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  height: 100%;

  .markdown-body {
    margin-top: 12px;
    padding: 10px;
  }

  h4 {
    font-weight: 500;
    font-size: 14px;
    color: #262626;
    line-height: 22px;
  }

  .change-btn {
    color: #436bff;
  }
}
</style>
